/*
 * @Author: Soulmate
 * @Date: 2023-09-15 11:05:12
 * @LastEditTime: 2023-09-15 11:06:49
 * @LastEditors: Soulmate
 * @Description:
 * @FilePath: \ruoyi-ui-vue3\src\utils\sortable.ts
 * 版权声明
 */
import Sortable from 'sortablejs';

/**
 * 拖动方法
 */
export function useSortAble(el, btnClass) {
    Sortable.create(el, {
        animation: 150,
        ghostClass: 'blue-background-class',
        handle: btnClass, // 如果需要点击某个图标拖拽的话需要吧那个图标的class写在这里
        // 写完以上部分就已经可以实现基本的拖拽功能了，以下是拓展
        //始拖拽事件
        onEnd: function (/**Event*/ evt) {
            let newIndex = evt.newIndex; // 排序后的索引位置
            let oldIndex = evt.oldIndex; // 排序前的索引位置
            var itemEl = evt.item; // 拖拽 HTMLElement
            evt.to; // 目标表
            evt.from; // 上一个列表
            evt.oldIndex; // 元素在旧父级中的旧索引
            evt.newIndex; // 元素在新父级中的新索引
            evt.clone; // 克隆元件
            evt.pullMode; // 当项目在另一个可排序表中时：`“clone”`如果克隆，`true`如果移动
        },
        //点击选中元素事件
        onChoose: function (/**Event*/ evt) {
            evt.oldIndex;
        },
        //取消选中事件
        onUnchoose: function (/**Event*/ evt) {},
    });
}
